<template>
    <div>
        <div class="head">
            <div class="logo">登录页</div>
            <div class="menu"></div>
        </div>
        <div class="login">
            <div class="login_info">
                <div class="login_info_txt"><br> </div>
                <img class="login_info_img" src="../assets/fengjing.png"/>
            </div>
            <div class="login_item">
                <div class="login_item_welcome">
                    人生到处知何似,应似飞鸿踏雪泥</div>
                <div class="login_item_description"><br><br>人生充满了艰险阻难，但是应该如飞鸿一样踏雪而过，披荆斩棘，在人生路上留下印记，然后继续前进
                    <br ><br ><br ><br ></div>
                <div class="login_item_frame">
                    <div class="user">
                        <img class="img_usr" src="../assets/用户.png">
                        <div class="input">
                            <div class="input_hint">
                                用户账号</div>
                           <input id="user" type="text" class="input_sample" style="border: 0px;background-color: #eef7f5"/>
                            <!--<div class="input_sample">-->
                                <!--1126918543@qq.com</div>-->
                        </div>
                        <img class="input_hint_imgi" src="../assets/正确.png"/>
                    </div>
                    <div class="password">
                        <img class="img_paswod" src="../assets/密码.png"/>
                        <div class="input">
                            <div class="input_hint">
                                输入密码</div>
                            <input id="password" type="password" class="input_sample" style="border: 0px;"/>
                        </div>
                        <img class="input_hint_imgii" src="../assets/关闭.png"/>
                    </div>
                </div>
                <div class="login_util">
                    <div class="remember">
                        <img class="remember_img" src="../assets/正确.png"/>
                        <div class="remember_txt">保持登陆</div>
                    </div>
                    <div class="forget">
                        <div class="remember_txt" @click="forgetPassword">忘记密码?</div>
                    </div>
                </div>
                <div class="button">
                    <a class="btn_a"><button class="login_btn" @click="login">登陆</button></a>
                    <button class="register_btn" @click="add">注册</button>
                </div>
                <div class="share">
                    <div class="share_txt">分享至</div>
                    <div class="share_imgs">
                        <img class="share_img" src="../assets/朋友圈.png"/>
                        <img class="share_img" src="../assets/微博.png"/>
                        <img class="share_img" src="../assets/GitHub.png"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Index",
        methods:{
            login:function () {
                var user = document.getElementById('user').value
                var paswod = document.getElementById('password').value
                var that = this
                this.db.user.find({user:user},function (err,docs) {
                    if (docs.length==0 || docs[0].password!=paswod){
                        that.$notify.error({
                            title:'错误',
                            message:'用户名或者密码正确',
                        })
                    } else{
                        that.$notify({
                            title:'成功',
                            message:'登陆成功',
                            type:'success'
                        })
                    }
                })
            },
            add:function () {
                var user = document.getElementById('user').value
                var paswod = document.getElementById('password').value
                var userInfo = {
                    user:user,
                    password:paswod
                }
                var that = this
                this.db.user.insert(userInfo,function (err) {
                    if (err) {
                        that.$notify.error({
                            title:'错误',
                            message:'插入失败:'+err,
                        })
                    }else{
                        that.$notify({
                            title:'成功',
                            message:'注册成功',
                            type:'success'
                        })
                    }
                })
            },
            forgetPassword:function () {
                this.$notify({
                    title:'警告',
                    message:'请联系管理员解决',
                    type:'warning'
                })
            }
        },
        data:function () {
            return{
                user:'',
                password:''
            }
        },
        computed:{
            db:function () {
                let Datastore = require('nedb')
                let options = {
                    filename:'./db/login.db',
                    autoload:true,
                    // nodeWebkitAppName:'web_three'
                }
                let db = {}
                db.user = new Datastore(options)
                db.user.loadDatabase()
                db.user.persistence.setAutocompactionInterval(5);
                return db
            }
        }
    }
</script>

<style src="../css/indexStyle.css" media="(min-width: 901px)">

</style>
